<template>
  <div class="cate">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/home/categories'}">商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加按钮 -->
    <el-row>
      <el-col>
        <el-button type='primary' @click="showCategory">添加分类</el-button>
      </el-col>
    </el-row>
    <!-- 卡片 -->
    <el-card>
      <!-- 使用树形表格 -->
      <zk-table :data='categoryList' :columns='columns' :selection-type="false" show-index index-text='#' border :expand-type='false'>
        <!-- 是否有效 -->
        <template slot='deleted' slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted == false" style="color:yellowgreen;fontSize:16px"></i>
          <i class="el-icon-error" v-if="scope.row.cat_deleted == true" style="color:red;fontSize:16px"></i>
        </template>
        <!-- 等级 -->
        <template slot='level' slot-scope="scope">
          <el-tag v-if='scope.row.cat_level == 0'>等级一</el-tag>
          <el-tag v-if='scope.row.cat_level == 1' type='success'>等级二</el-tag>
          <el-tag v-if='scope.row.cat_level == 2' type='warning'>等级三</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="options">
          <el-button type='primary' size='mini'>编辑</el-button>
          <el-button type='danger' size='mini'>删除</el-button>
        </template>
      </zk-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[2, 3, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加分类弹窗 -->
    <el-dialog title="添加分类" :visible.sync="categoryVisible">
      <el-form :model="categoryInfo">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="categoryInfo.cat_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label='选择分类' :label-width='formLabelWidth'>
          <!-- 级联选择器 -->
          <el-cascader v-model="selectedIds" filterable :options="addCategoryList" :props="options" @change="handleChange"></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="categoryVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 使用第三方插件 树形列表
// vue-table-with-tree-grid
export default {
  name: 'Categorie',
  data() {
    return {
      // 获取数据
      categoryList: [],
      // 列表参数传参
      queryInfo: {
        pagenum: 1,
        pagesize: 5
      },
      // 总条数
      total: 0,
      // 树形表格的columns
      columns: [
        {
          // 表头名称
          label: '商品分类',
          // 属性
          prop: 'cat_name',
          width: '200px',
          // 居中
          headerAlign: 'center',
          align: 'center'
        },
        {
          // 表头名称
          label: '是否有效',
          // 属性
          prop: 'cat_deleted',
          minwidth: '200px',
          // 列类型，可选值有 'template'(自定义列模板)
          type: 'template',
          // 列类型为 'template'(自定义列模板) 时，对应的作用域插槽
          template: 'deleted',
          // 居中
          headerAlign: 'center',
          align: 'center'
        },
        {
          // 表头名称
          label: '等级',
          // 属性
          prop: 'cat_level',
          minwidth: '200px',
          type: 'template',
          template: 'level',
          // 居中
          headerAlign: 'center',
          align: 'center'
        },
        {
          // 表头名称
          label: '操作',
          minwidth: '200px',
          type: 'template',
          template: 'options',
          // 居中
          headerAlign: 'center',
          align: 'center'
        }
      ],
      // 分类弹窗的显示和隐藏
      categoryVisible: false,
      // form文本宽度
      formLabelWidth: '100px',
      // 添加分类所需的数据
      categoryInfo: {
        // 用户输入的分类名称
        cat_name: '',
        // 分类的父级id
        cat_pid: 0,
        // 分类的等级
        cat_level: 0
      },
      //存放一级、二级分类列表
      addCategoryList: [],
      // 级联参数配置
      options: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        // 悬浮
        expandTrigger: 'hover',
        // 单选 可选择任意一项
        checkStrictly: true
      },
      // 存放获取的分类id
      selectedIds: []
    }
  },
  methods: {
    async getCategoryList() {
      const { data } = await this.$http.get('categories', {
        params: this.queryInfo
      })
      console.log(data)
      // 赋值数组
      this.categoryList = data.data.result
      // 总条数
      this.total = data.data.total
    },
    // 每页条数
    handleSizeChange(newSize) {
      // 赋值
      this.queryInfo.pagesize = newSize
      // 刷新数据
      this.getCategoryList()
    },
    // 当前页
    handleCurrentChange(newNum) {
      // 赋值
      this.queryInfo.pagenum = newNum
      //刷新数据
      this.getCategoryList()
    },
    // 点击获取分类一级、二级分类的数据
    async showCategory() {
      // 获取一级、二级分类的数据
      const { data } = await this.$http.get('categories', {
        params: {
          type: 2,
          pagenum: 1,
          pagesize: 100
        }
      })
      console.log(data)
      this.addCategoryList = data.data.result
      // 显示
      this.categoryVisible = true
    },
    // 级联选择器改变触发事件
    handleChange() {
      // 证明级联选择器有选中
      if (this.selectedIds.length > 0) {
        // 将数组最后一项当做当前添加分类的父级ID => cat_pid
        this.categoryInfo.cat_pid = this.selectedIds[this.selectedIds.length - 1]
        // 等级 = 数组的长度
        this.categoryInfo.cat_level = this.selectedIds.length
      } else {
        // 清空重置
        this.categoryInfo.cat_pid = 0
        this.categoryInfo.cat_level = 0
      }
    },

    //点击确认添加分类
    async addCategory() {
      // 发送请求
      const { data } = await this.$http.post('categories', this.categoryInfo)
      console.log(data)
      // 更新数据
      this.getCategoryList()
      // 关闭添加对话框
      this.categoryVisible = false
    }
  },
  created() {
    this.getCategoryList()
  }
}
</script>
<style lang="less">
.el-col {
  margin: 20px 0;
}
.el-pagination {
  margin-top: 20px;
}
// 级联选择器
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 10px;
}
.el-cascader-node__label {
  width: 157px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>
